<script setup lang="ts">
import recharge1Img from './img/recharge1.jpg'
import recharge6Img from './img/recharge6.jpg'
import recharge30Img from './img/recharge30.jpg'
import recharge68Img from './img/recharge68.jpg'
import recharge128Img from './img/recharge128.jpg'
import recharge198Img from './img/recharge198.jpg'
import recharge328Img from './img/recharge328.jpg'
import recharge648Img from './img/recharge648.jpg'

const arr = [
  {id: 1, src: recharge1Img},
  {id: 6, src: recharge6Img},
  {id: 30, src: recharge30Img},
  {id: 68, src: recharge68Img},
  {id: 128, src: recharge128Img},
  {id: 198, src: recharge198Img},
  {id: 328, src: recharge328Img},
  {id: 648, src: recharge648Img},
]
const emits = defineEmits(['recharge'])

function recharge(id: number) {
  emits('recharge', id)
}
</script>
<template>
  <ul class="ul">
    <li class="li" v-for="item in arr" :key="item.id" @click="recharge(item.id)">
      <img class="img" :src="item.src" alt="">
    </li>
  </ul>

</template>
<style scoped lang="scss">
.ul {
  display: grid;
  grid-column-gap: calc(8px + 1vw);
  grid-row-gap: calc(4px + 1vw);
  padding: 0;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);

  .li {
    cursor: pointer;

    .img {
      height: calc(10em + 6vw)
    }
  }
}
</style>